<template>
  <div>
    <div class="container">
      <el-table
        :data="tableData"
        style="width: 80%"
        stripe
        border
        header-cell-class-name="active-header"
        cell-class-name="table-center"
        :span-method="handleSpan">
        <el-table-column prop="profession" label="岗位等级/任职时间"> </el-table-column>
        <el-table-column prop="score.0" label="<3年"> </el-table-column>
        <el-table-column prop="score.1" label=">=3年"> </el-table-column>
        <el-table-column prop="score.2" label=">=6年"> </el-table-column>
        <el-table-column prop="score.3" label=">=9年"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          profession: "技师",
          score: [0, 0, 0, 0],
        },
        {
          profession: "高级工",
          score: [0, 0, 0, 0],
        },
        {
          profession: "中级工",
          score: [0, 0, 0, 0],
        },
        {
          profession: "初级工",
          score: [0, 0, 0, 0],
        },
        {
          profession: "普工",
          score: [0, 0, 0, 0],
        },
      ],
    };
  },
  methods: {
    async getTableData() {
      const res = await this.$api.getWorkStandard();
      console.log(res);
      let arr = res.data.data;
      let newArr = [];
      arr.forEach((item) => {
        let flag = 1;
        for (let i = 0; i < newArr.length; i++) {
          if (item.profession === newArr[i].profession) {
            newArr[i].score.push(item.score);
            flag = 0;
            break;
          }
        }
        if (flag) {
          newArr.push({
            profession: item.profession,
            score: [item.score],
          });
        }
      });
      this.tableData = newArr;
    },
    handleSpan({ row, column }) {
      // 仅处理 score 列
      if (!column.property?.startsWith("score.")) {
        return { rowspan: 1, colspan: 1 };
      }

      const colIndex = parseInt(column.property.split(".")[1]);
      const scores = row.score || [];
      if (scores.length < 4) return { rowspan: 1, colspan: 1 };

      // 判断合并条件
      const allSame = scores[0] === scores[1] && scores[1] === scores[2] && scores[2] === scores[3];
      const leftSame = scores[0] === scores[1];
      const rightSame = scores[2] === scores[3];

      // 合并逻辑
      if (allSame) {
        // 合并全部四个单元格
        return colIndex === 0 ? { rowspan: 1, colspan: 4 } : { rowspan: 0, colspan: 0 };
      } else if (leftSame && rightSame) {
        // 同时合并左右两组
        if (colIndex === 0 || colIndex === 2) {
          return { rowspan: 1, colspan: 2 };
        } else if (colIndex === 1 || colIndex === 3) {
          return { rowspan: 0, colspan: 0 };
        }
      } else if (leftSame) {
        // 只合并左侧两个
        if (colIndex === 0) {
          return { rowspan: 1, colspan: 2 };
        } else if (colIndex === 1) {
          return { rowspan: 0, colspan: 0 };
        }
      } else if (rightSame) {
        // 只合并右侧两个
        if (colIndex === 2) {
          return { rowspan: 1, colspan: 2 };
        } else if (colIndex === 3) {
          return { rowspan: 0, colspan: 0 };
        }
      }

      // 默认不合并
      return { rowspan: 1, colspan: 1 };
    },
  },
  mounted() {
    this.getTableData();
    console.log("工勤岗标准分值---workScore");
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: center;
  width: 94%;
  height: 700px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;

  /deep/ .el-table__row {
    height: 20px;
  }

  /deep/ .el-table__cell {
    padding: 8px 0;
  }

  /deep/ .active-header {
    color: #333;
    text-align: center;
  }
  /deep/ .table-center {
    text-align: center;
  }
  /deep/ .el-table td,
  /deep/.el-table th {
    border-bottom: 1px solid #333 !important; /* 横向边框颜色 */
    border-right: 1px solid #333 !important; /* 纵向边框颜色 */
  }
}
</style>
